<template>
  <scroll-view
    class="table-container-scroll"
    :scroll-with-animation="true"
    :scrollX="true"
    :scrollY="true"
    @scrolltolower="onScrolltolower"
  >
    <view class="table-container">
      <view>
        <view class="table-header table-sticky">
          <view class="table-tr table-header-flex">
            <view class="table-th table--border" v-for="column in columns" :key="column.dataIndex">
              <view class="table-th-title" :class="{ 'no-padding': column.nopadding }" :style="{ width: column.width }">
                <template v-if="column.titleSlotName">
                  <!-- titleSlotName 插槽 -->
                  <slot v-if="column.titleSlotName" :name="column.titleSlotName" :column="column"></slot>
                </template>
                <template v-else>
                  {{ column.title }}
                </template>
              </view>
            </view>
          </view>
        </view>
        <view class="table-body">
          <template v-if="data.length > 0">
            <view class="table-tr" v-for="item in data" :key="item.staffId">
              <view class="table-td table--border" v-for="column in columns" :key="column.dataIndex">
                <view class="table-td-title" :class="{ 'no-padding': column.nopadding }" :style="{ width: column.width }">
                  <template v-if="column.slotName">
                    <!-- slotName 插槽 -->
                    <slot v-if="column.slotName" :name="column.slotName" :record="item" :column="column"></slot>
                  </template>
                  <template v-else>
                    {{ item[column.dataIndex] }}
                  </template>
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="empty">暂无数据</view>
          </template>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
  const props = defineProps({
    padding: {
      type: Boolean,
      default: true,
    },
    columns: {
      type: Array<any>,
      default: () => [],
    },
    data: {
      type: Array<any>,
      default: () => [],
    },
  })

  const emits = defineEmits(['scrolltolower'])
  const onScrolltolower = (options: any) => {
    if (options.detail.direction === 'bottom') {
      emits('scrolltolower')
    }
  }
</script>

<style lang="less" scoped>
  .table-sticky {
    position: sticky;
    top: -1px;
    z-index: 2;
  }

  .table--border {
    border-right: 1px #ebeef5 solid;
  }

  .table-container-scroll {
    .table-container {
      min-width: 100%;
      width: auto;
      display: table;
      table-layout: fixed;
      height: auto;
      background-color: #fff;

      .table-header {
        height: 50px;

        .table-th {
          height: 100%;
        }
      }

      .table-header-flex {
        display: flex;
      }

      .table-tr {
        width: 100%;
        height: 100%;
        display: flex;
      }

      .table-th,
      .table-td {
        flex: 1;
        // display: table-cell;
        display: flex;
        vertical-align: top;
        text-align: center;
        border-bottom: 1px #ebeef5 solid;
      }

      .table-th-title,
      .table-td-title {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-weight: 400;
        font-size: 12px;
        color: #191c27;
        padding: 8px 10px;
      }

      .no-padding {
        padding: 0 0;
      }

      .empty {
        text-align: center;
        font-size: 15px;
        padding: 20px 0;
        color: #999;
      }
    }
  }
</style>
